Вёрстка сайта для начинающих 2015

Урок 0. Введение:
Как вы знаете, при создании сайтов этап верстки идет после этапа дизайна. В курсе по верстке сайта для начинающих мы с вами приблизимся к реальной разработке, и будем верстать html страницу из готовой картинки формата psd, созданной дизайнерами.
Курс по верстке сайта для начинающих рассчитан на новичков в сайтостроении и верстке, но так же будет полезен и тем, у кого уже есть знания по html, есть знания по css, но при верстке реальных макетов с нуля испытывает затруднения.
Макет, который мы будем верстать, имеет очень распространенную, двухколоночную структуру. Поэтому выполнив верстку данного макета и полностью разобравшись с ней, у вас больше не будет сложностей с версткой сайтов подобной структуры.
В курсе мы с вами пошагово выполним верстку: определимся с разметкой страницы, опишем ее с помощью html, далее назначим стили и оформим внешний вид страницы, протестируем и доработаем верстку.
Видеоуроки по вёрстке сайтов с нуля. Если ты начинающий вебмастер и хочешь научиться качественн верстать сайты, то изучи наши уроки!


Урок 1. Определение разметки:
От автора: при верстке макета очень важно, как можно лучше продумать разметку страницы. Для этого необходимо внимательно исследовать макет. Если сайт включает несколько разновидностей страниц, то необходимо сразу просмотреть все макеты всех страниц, чтобы все, как можно лучше спроектировать и дальнейшая верстка страниц двигалась быстро и без «переделок». В данном начальном уроке курса мы с вами спроектируем разметку нашей страницы, продумаем и подготовим все необходимое для дальнейшей верстки.
По результатам урока Вы научитесь исследовать макет, определять структуру разметки. Так же продумаем и подготовим все необходимое нам для верстки.


Урок 2. Описание разметки:
От автора: во втором уроке курса мы перейдем непосредственно к описанию нашей разметки, с которой мы определились в предыдущем уроке, на html. Пошагово опишем каждый блок нашей разметки. Установим логотип, меню, опишем блок с баннером, блок с основным контентом, правую колонку и блок footer-а.
По результатам урока у вас будет полностью готовый HTML код нашей страницы.


Урок 3. CSS шапки сайта:
От автора: в прошлом уроке мы полостью написали html код нашей страницы. Но, как вы уже знаете, html отвечает только за разметку страницы, а за внешний вид и оформление отвечает css. И в данном уроке мы начнем описывать стили css и приводить внешний вид нашей страницы в соответствие с макетом. В уроке подключим css к странице, а так же назначим стили для шапки сайта: выстроим логотип и меню.
По результатам урока у нас будет подключен css к странице. И будет полностью готова шапка сайта: логотип и выстроено меню.


Урок 4. CSS области контента:
От автора: в предыдущем уроке мы с вами описали стили шапки страницы. В данном уроке мы продолжим назначать стили и оформлять страницу. Назначим стили для области основного контента. Выстроим правую и левую колонки. Назначим стили для заголовков, абзацев. Так же поработаем с блоком footer-а. Соответственно у нас будут описаны стили для каждого блока нашей страницы, поэтому верстку страницы можно будет считать завершенной.
По результатам урока у нас будет готовая веб-страница. Страница будет полностью соответствовать изначальному макету и готова к размещению в сети интернет.


Урок 5. Доработка вёрстки:
От автора: в предыдущих уроках курса мы с вами полностью закончили верстку нашей страницы. Но в дальнейшем, когда страница будет наполняться реальным контеном и перерастать в полноценный сайт, выяснятся некоторые мелкие недоработки. Их можно будет исправлять походу расширения сайта, но лучше все постараться учесть на этапе верстки, чтобы потом как можно меньше правок вносить в готовую страницу. В данном уроке мы с вами доработаем страницу, чтобы она могла дополняться и расширяться без неприятных последствий.
По результатам урока мы получим полностью готовую к расширению и дополнению страницу, которую можно будет быстро и без дополнительных правок наполнять любым контентом и размещать в сети.